<template>
    <div id="bottom">
         <router-link to="/" :class="{'high-lighted':path=='/'}">
            <div>
                <span class="fa fa-home"></span>
                <p>首页</p>
            </div>
        </router-link>

        <router-link to="/sort" :class="{'high-lighted':path=='/sort'}">
            <div>
                <span class="fa fa-list"></span>
                <p>分类</p>
            </div>
        </router-link>
       <!-- <router-link to="/active">
    
            <img src="/static/images/bottom.png">
        
        </router-link>-->
        <router-link to="/cart" :class="{'high-lighted':path=='/cart'}">
            <div class="gouwuche" >
                <span class="fa fa-shopping-cart"></span>
                <p>购物车</p>
            </div>
        </router-link>
        
        <router-link to="/mine" :class="{'high-lighted':path=='/mine'}">
            <div class="gouwuche">
                <span class="fa fa-user-o"></span>
                <p>我的</p>
            </div>
        </router-link>
        
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default{
    data:function(){
        return {
        }
    },
    computed:{
        path:function(){
            return this.$route.path
        }
    }
}
</script>

<style scoped>
    #bottom{
        height:40px;
        display:flex;
        justify-content:space-between;
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        align-items:center;
        border-top:solid 1px #999999;
        background-color:#fff;
    }
    #bottom div{
        text-align:center;
        width:50px;
        height:40px;
        padding-top:5px;
    }
    #bottom div>span{
        font-size:18px;
    }
    p{
        margin:0;
        font-size:10px;
    }
    a{
        color:black;
        text-decoration:none;
    }
    .gouwuche{
        cursor:pointer;
    }
    .high-lighted{
        color:red;
        background-color:white;
        display:inline-block;
        width:50px;
        height:40px;
    }
    img{
        height:55px;
        padding-bottom:7px;
    }
</style>